<template>
  <div class="dashboard-container">
    <!-- 顶部核心指标 -->
    <div class="top-metrics">
      <div class="metric-card" v-for="(metric, index) in topMetrics" :key="index">
        <div class="metric-icon">
          <component :is="metric.icon" />
        </div>
        <div class="metric-content">
          <div class="metric-value">
            <span class="number">{{ formatNumber(metric.value) }}</span>
            <span class="unit">{{ metric.unit }}</span>
          </div>
          <div class="metric-label">{{ metric.label }}</div>
          <div class="metric-trend" :class="metric.trend">
            <ArrowUpOutlined v-if="metric.trend === 'up'" />
            <ArrowDownOutlined v-else />
            {{ metric.change }}
          </div>
        </div>
        <div class="metric-particles"></div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧数据区域 -->
      <div class="left-panel">
        <div class="panel-card">
          <h3 class="card-title">
            <MessageOutlined />
            实时动态流
          </h3>
          <div class="real-time-feed">
            <div
              v-for="(item, index) in realTimeFeed"
              :key="index"
              class="feed-item"
              :style="{ animationDelay: `${index * 0.1}s` }"
            >
              <div class="feed-avatar">
                <img :src="item.avatar" :alt="item.user" />
              </div>
              <div class="feed-content">
                <div class="feed-user">{{ item.user }}</div>
                <div class="feed-action">{{ item.action }}</div>
                <div class="feed-time">{{ item.time }}</div>
              </div>
              <div class="feed-indicator" :class="item.type"></div>
            </div>
          </div>
        </div>

        <div class="panel-card">
          <h3 class="card-title">
            <LineChartOutlined />
            用户活跃度趋势
          </h3>
          <div ref="userActiveChart" class="chart-container"></div>
        </div>

        <div class="panel-card">
          <h3 class="card-title">
            <BarChartOutlined />
            内容发布统计
          </h3>
          <div ref="contentPublishChart" class="chart-container"></div>
        </div>
      </div>

      <!-- 中心地图区域 -->
      <div class="center-map">
        <div class="map-header">
          <h2 class="map-title">
            <GlobalOutlined />
            全国校园分布实时监控
          </h2>
          <div class="map-controls">
            <a-button
              v-for="view in mapViews"
              :key="view.key"
              :type="currentView === view.key ? 'primary' : 'default'"
              size="small"
              @click="switchMapView(view.key)"
            >
              {{ view.label }}
            </a-button>
          </div>
        </div>
        <div ref="chinaMapChart" class="map-chart"></div>
        <div class="map-legend">
          <div class="legend-item" v-for="item in mapLegend" :key="item.label">
            <div class="legend-color" :style="{ backgroundColor: item.color }"></div>
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>

      <!-- 右侧数据区域 -->
      <div class="right-panel">
        <div class="panel-card">
          <h3 class="card-title">
            <TrophyOutlined />
            学校活跃排行
          </h3>
          <div class="school-ranking">
            <div
              v-for="(school, index) in schoolRanking"
              :key="index"
              class="ranking-item"
              :class="{ 'top-three': index < 3 }"
            >
              <div class="rank-number">{{ index + 1 }}</div>
              <div class="school-info">
                <div class="school-name">{{ school.name }}</div>
                <div class="school-stats">{{ school.activeUsers }}活跃用户</div>
              </div>
              <div class="rank-value">{{ school.score }}</div>
            </div>
          </div>
        </div>

        <div class="panel-card">
          <h3 class="card-title">
            <CloudOutlined />
            热门话题云图
          </h3>
          <div ref="topicCloudChart" class="chart-container"></div>
        </div>

        <div class="panel-card">
          <h3 class="card-title">
            <RadarChartOutlined />
            互动数据雷达
          </h3>
          <div ref="interactionRadarChart" class="chart-container"></div>
        </div>
      </div>
    </div>

    <!-- 背景粒子效果 -->
    <div class="particles-bg">
      <div v-for="i in 50" :key="i" class="particle" :style="getParticleStyle(i)"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import {
  GlobalOutlined,
  LineChartOutlined,
  BarChartOutlined,
  PieChartOutlined,
  RadarChartOutlined,
  MessageOutlined,
  TrophyOutlined,
  CloudOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  UserOutlined,
  TeamOutlined,
  FileTextOutlined,
  HeartOutlined,
} from '@ant-design/icons-vue'
import * as echarts from 'echarts'
import 'echarts-gl'
import 'echarts-wordcloud'

// 图表引用
const chinaMapChart = ref<HTMLElement>()
const userActiveChart = ref<HTMLElement>()
const contentPublishChart = ref<HTMLElement>()
const topicCloudChart = ref<HTMLElement>()
const interactionRadarChart = ref<HTMLElement>()

// 数据状态
const currentView = ref('users')
const chartInstances = ref<any[]>([])

// 顶部核心指标
const topMetrics = reactive([
  {
    label: '注册用户总数',
    value: 128500,
    unit: '',
    icon: UserOutlined,
    trend: 'up',
    change: '+12.5%',
  },
  {
    label: '活跃学校数',
    value: 985,
    unit: '+',
    icon: TeamOutlined,
    trend: 'up',
    change: '+8.3%',
  },
  {
    label: '今日新增内容',
    value: 2800,
    unit: '',
    icon: FileTextOutlined,
    trend: 'up',
    change: '+15.2%',
  },
  {
    label: '平台互动次数',
    value: 56700000,
    unit: '',
    icon: HeartOutlined,
    trend: 'up',
    change: '+23.7%',
  },
])

// 地图视图选项
const mapViews = [
  { key: 'users', label: '用户分布' },
  { key: 'schools', label: '学校分布' },
  { key: 'activities', label: '活动热度' },
]

// 地图图例
const mapLegend = [
  { label: '高活跃区域', color: '#ff6b6b' },
  { label: '中等活跃', color: '#4ecdc4' },
  { label: '一般活跃', color: '#45b7d1' },
  { label: '待发展区域', color: '#96ceb4' },
]

// 学校排行榜
const schoolRanking = reactive([
  { name: '广东农工商职业技术学院', activeUsers: '12.5K', score: '98.5' },
  { name: '广东轻工职业技术学院', activeUsers: '11.8K', score: '96.2' },
  { name: '广东交通职业技术学院', activeUsers: '10.3K', score: '94.7' },
  { name: '广东建设职业技术学院', activeUsers: '9.8K', score: '92.1' },
  { name: '广东科学技术职业学院', activeUsers: '9.2K', score: '90.3' },
  { name: '广东建设职业技术学院', activeUsers: '8.5K', score: '88.9' },
])

// 实时动态流
const realTimeFeed = reactive([
  {
    user: '张同学',
    action: '发布了新帖子《期末复习攻略》',
    time: '刚刚',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhang',
    type: 'post',
  },
  {
    user: '李同学',
    action: '点赞了话题 #校园生活',
    time: '1分钟前',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=li',
    type: 'like',
  },
  {
    user: '王同学',
    action: '评论了《图书馆占座技巧》',
    time: '2分钟前',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=wang',
    type: 'comment',
  },
  {
    user: '赵同学',
    action: '加入了 #考研交流 话题',
    time: '3分钟前',
    avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=zhao',
    type: 'join',
  },
])

// 数字格式化
const formatNumber = (num: number): string => {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

// 粒子样式生成
const getParticleStyle = (index: number) => {
  return {
    left: Math.random() * 100 + '%',
    top: Math.random() * 100 + '%',
    animationDelay: Math.random() * 10 + 's',
    animationDuration: Math.random() * 20 + 10 + 's',
  }
}

// 切换地图视图
const switchMapView = (view: string) => {
  currentView.value = view
  updateChinaMap()
}

// 中国地图数据
const getChinaMapData = () => {
  const baseData = [
    { name: '北京', value: [116.46, 39.92, Math.floor(Math.random() * 1000) + 500] },
    { name: '上海', value: [121.48, 31.22, Math.floor(Math.random() * 1000) + 800] },
    { name: '广州', value: [113.23, 23.16, Math.floor(Math.random() * 1000) + 600] },
    { name: '深圳', value: [114.07, 22.62, Math.floor(Math.random() * 1000) + 700] },
    { name: '杭州', value: [120.19, 30.26, Math.floor(Math.random() * 1000) + 400] },
    { name: '南京', value: [118.78, 32.04, Math.floor(Math.random() * 1000) + 350] },
    { name: '武汉', value: [114.31, 30.52, Math.floor(Math.random() * 1000) + 450] },
    { name: '成都', value: [104.06, 30.67, Math.floor(Math.random() * 1000) + 500] },
    { name: '西安', value: [108.95, 34.27, Math.floor(Math.random() * 1000) + 300] },
    { name: '重庆', value: [106.54, 29.59, Math.floor(Math.random() * 1000) + 400] },
  ]

  return baseData.map((item) => ({
    ...item,
    value:
      currentView.value === 'users'
        ? item.value
        : currentView.value === 'schools'
        ? [item.value[0], item.value[1], Math.floor(Math.random() * 50) + 10]
        : [item.value[0], item.value[1], Math.floor(Math.random() * 100) + 20],
  }))
}

// 初始化中国地图
const initChinaMap = async () => {
  if (!chinaMapChart.value) return

  // 注册中国地图
  const chinaGeoJson = await fetch(
    'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'
  ).then((res) => res.json())
  echarts.registerMap('china', chinaGeoJson)

  const chart = echarts.init(chinaMapChart.value)
  chartInstances.value.push(chart)

  updateChinaMap()
}

// 更新中国地图
const updateChinaMap = () => {
  const chart = chartInstances.value.find((c) => c.getDom() === chinaMapChart.value)
  if (!chart) return

  const data = getChinaMapData()

  const option = {
    backgroundColor: 'transparent',
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 20, 51, 0.9)',
      borderColor: '#00d4ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
      },
      formatter: function (params: any) {
        if (params.data) {
          return `${params.data.name}<br/>数量: ${params.data.value[2]}`
        }
        return params.name
      },
    },
    geo: {
      map: 'china',
      roam: true,
      zoom: 1.2,
      center: [105, 36],
      itemStyle: {
        areaColor: 'rgba(0, 40, 102, 0.3)',
        borderColor: '#00d4ff',
        borderWidth: 1,
      },
      emphasis: {
        itemStyle: {
          areaColor: 'rgba(0, 212, 255, 0.2)',
        },
      },
      regions: [
        {
          name: '南海诸岛',
          itemStyle: {
            opacity: 0,
          },
        },
      ],
    },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        data: data,
        symbolSize: function (val: number[]) {
          return Math.max(val[2] / 30, 8)
        },
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              { offset: 0, color: '#00ff88' },
              { offset: 0.7, color: '#00d4ff' },
              { offset: 1, color: 'rgba(0, 212, 255, 0.2)' },
            ],
          },
        },
        emphasis: {
          scale: 1.5,
        },
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        data: data.slice(0, 5),
        symbolSize: function (val: number[]) {
          return Math.max(val[2] / 20, 12)
        },
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke',
          scale: 3,
          period: 4,
        },
        itemStyle: {
          color: '#ff6b35',
          shadowBlur: 10,
          shadowColor: '#ff6b35',
        },
      },
    ],
  }

  chart.setOption(option)
}

// 初始化用户活跃度图表
const initUserActiveChart = () => {
  if (!userActiveChart.value) return

  try {
    const chart = echarts.init(userActiveChart.value)
    chartInstances.value.push(chart)

    const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
    const data = Array.from({ length: 24 }, () => Math.floor(Math.random() * 1000) + 200)

    const option = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 20, 51, 0.9)',
        borderColor: '#00d4ff',
        textStyle: { color: '#fff' },
      },
      grid: {
        left: '12%',
        right: '8%',
        bottom: '18%',
        top: '20%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: hours,
        axisLine: { lineStyle: { color: '#00d4ff' } },
        axisLabel: { color: '#fff', fontSize: 12, interval: 2 },
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#00d4ff' } },
        axisLabel: { color: '#fff', fontSize: 12 },
        splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.2)' } },
      },
      series: [
        {
          data: data,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#00ff88', width: 3 },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(0, 255, 136, 0.6)' },
                { offset: 1, color: 'rgba(0, 255, 136, 0.1)' },
              ],
            },
          },
          itemStyle: { color: '#00ff88' },
        },
      ],
    }

    chart.setOption(option)
  } catch (error) {
    console.warn('用户活跃度图表初始化失败:', error)
  }
}

// 初始化内容发布统计图表
const initContentPublishChart = () => {
  if (!contentPublishChart.value) return

  try {
    const chart = echarts.init(contentPublishChart.value)
    chartInstances.value.push(chart)

    const categories = ['帖子', '评论', '话题', '点赞', '分享']
    const data = [456, 782, 234, 1205, 345]

    const option = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 20, 51, 0.9)',
        borderColor: '#00d4ff',
        textStyle: { color: '#fff' },
      },
      grid: {
        left: '12%',
        right: '8%',
        bottom: '18%',
        top: '20%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: categories,
        axisLine: { lineStyle: { color: '#00d4ff' } },
        axisLabel: { color: '#fff', fontSize: 12 },
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#00d4ff' } },
        axisLabel: { color: '#fff', fontSize: 12 },
        splitLine: { lineStyle: { color: 'rgba(0, 212, 255, 0.2)' } },
      },
      series: [
        {
          data: data,
          type: 'bar',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#00d4ff' },
                { offset: 1, color: '#0066cc' },
              ],
            },
          },
          barWidth: '60%',
        },
      ],
    }

    chart.setOption(option)
  } catch (error) {
    console.warn('内容发布统计图表初始化失败:', error)
  }
}

// 初始化所有图表
const initAllCharts = () => {
  nextTick(() => {
    // 增加延迟确保DOM完全渲染
    setTimeout(() => {
      initChinaMap()
      initUserActiveChart()
      initContentPublishChart()
      initTopicCloudChart()
      initInteractionRadarChart()
    }, 200)
  })
}

// 初始化话题云图
const initTopicCloudChart = () => {
  if (!topicCloudChart.value) return

  const chart = echarts.init(topicCloudChart.value)
  chartInstances.value.push(chart)

  const topicData = [
    { name: '考研交流', value: 1200 },
    { name: '校园生活', value: 980 },
    { name: '期末复习', value: 850 },
    { name: '社团活动', value: 720 },
    { name: '实习求职', value: 650 },
    { name: '学科讨论', value: 580 },
    { name: '美食推荐', value: 520 },
    { name: '图书馆', value: 460 },
    { name: '宿舍生活', value: 380 },
    { name: '课程选择', value: 320 },
    { name: '社团活动', value: 280 },
    { name: '兼职工作', value: 240 },
  ]

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      backgroundColor: 'rgba(0, 20, 51, 0.9)',
      borderColor: '#00d4ff',
      textStyle: { color: '#fff' },
      formatter: function (params: any) {
        return `${params.name}: ${params.value}`
      },
    },
    series: [
      {
        type: 'wordCloud',
        shape: 'circle',
        keepAspect: false,
        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        right: null,
        bottom: null,
        sizeRange: [16, 40] /* 增加字体大小范围 */,
        rotationRange: [-45, 45],
        rotationStep: 15,
        gridSize: 8,
        drawOutOfBound: false,
        shrinkToFit: true /* 自动适应容器 */,
        textStyle: {
          fontFamily: 'Microsoft YaHei, Arial, sans-serif',
          fontWeight: 'bold',
          color: function () {
            const colors = [
              '#00ff88',
              '#00d4ff',
              '#ff6b35',
              '#ffd700',
              '#8b5cf6',
              '#ff6b6b',
              '#4ecdc4',
            ]
            return colors[Math.floor(Math.random() * colors.length)]
          },
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            shadowBlur: 10,
            shadowColor: '#333',
          },
        },
        data: topicData,
      },
    ],
  }

  chart.setOption(option)

  // 如果wordCloud插件未加载，显示备用方案
  chart.on('error', function () {
    console.warn('WordCloud plugin not available, using fallback')
    const fallbackOption = {
      backgroundColor: 'transparent',
      tooltip: {
        backgroundColor: 'rgba(0, 20, 51, 0.9)',
        borderColor: '#00d4ff',
        textStyle: { color: '#fff' },
      },
      series: [
        {
          type: 'scatter',
          data: topicData.map((item, index) => [
            index % 4,
            Math.floor(index / 4),
            item.value,
            item.name,
          ]),
          symbolSize: function (data: any) {
            return Math.sqrt(data[2]) / 10
          },
          label: {
            show: true,
            formatter: function (param: any) {
              return param.data[3]
            },
            color: '#00ff88',
          },
          itemStyle: {
            color: function (param: any) {
              const colors = ['#00ff88', '#00d4ff', '#ff6b35', '#ffd700', '#8b5cf6', '#ff6b6b']
              return colors[param.dataIndex % colors.length]
            },
            opacity: 0.6,
          },
        },
      ],
      xAxis: { show: false },
      yAxis: { show: false },
      grid: { left: 0, right: 0, top: 0, bottom: 0 },
    }
    chart.setOption(fallbackOption)
  })
}

// 初始化互动数据雷达图
const initInteractionRadarChart = () => {
  if (!interactionRadarChart.value) return

  const chart = echarts.init(interactionRadarChart.value)
  chartInstances.value.push(chart)

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      backgroundColor: 'rgba(0, 20, 51, 0.9)',
      borderColor: '#00d4ff',
      textStyle: { color: '#fff' },
    },
    radar: {
      indicator: [
        { name: '浏览量', max: 1000 },
        { name: '点赞数', max: 800 },
        { name: '评论数', max: 600 },
        { name: '分享数', max: 400 },
        { name: '收藏数', max: 500 },
        { name: '转发数', max: 300 },
      ],
      center: ['50%', '50%'],
      radius: '70%',
      splitNumber: 4,
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 12,
        },
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 212, 255, 0.3)',
        },
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(0, 212, 255, 0.1)', 'rgba(0, 255, 136, 0.05)'],
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 212, 255, 0.5)',
        },
      },
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: [850, 720, 450, 280, 380, 190],
            name: '本周数据',
            itemStyle: {
              color: '#00ff88',
            },
            areaStyle: {
              color: 'rgba(0, 255, 136, 0.3)',
            },
          },
          {
            value: [780, 650, 380, 220, 320, 150],
            name: '上周数据',
            itemStyle: {
              color: '#00d4ff',
            },
            areaStyle: {
              color: 'rgba(0, 212, 255, 0.2)',
            },
          },
        ],
      },
    ],
  }

  chart.setOption(option)
}

// 模拟动态流数据生成
const generateRealTimeFeed = () => {
  const users = ['小明', '小红', '小刚', '小丽', '小华', '小美', '小强', '小雅']
  const actions = [
    '发布了新帖子《学习心得分享》',
    '点赞了话题 #校园活动',
    '评论了《宿舍生活指南》',
    '加入了 #学习交流 话题',
    '分享了考试资料',
    '发布了图片动态',
    '回复了好友评论',
    '关注了学长学姐',
  ]
  const types = ['post', 'like', 'comment', 'join', 'share']

  const randomUser = users[Math.floor(Math.random() * users.length)]
  const randomAction = actions[Math.floor(Math.random() * actions.length)]
  const randomType = types[Math.floor(Math.random() * types.length)]

  return {
    user: randomUser,
    action: randomAction,
    time: '刚刚',
    avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${randomUser}`,
    type: randomType,
  }
}

// 更新实时动态流
const updateRealTimeFeed = () => {
  // 移除最后一个，在最前面添加新的
  if (realTimeFeed.length >= 4) {
    realTimeFeed.pop()
  }
  realTimeFeed.unshift(generateRealTimeFeed())

  // 更新时间
  realTimeFeed.forEach((item, index) => {
    if (index === 0) {
      item.time = '刚刚'
    } else {
      item.time = `${index}分钟前`
    }
  })
}

// 定时更新数据
let updateTimer: any = null
let feedTimer: any = null

const startDataUpdate = () => {
  // 主要数据更新（每5秒）
  updateTimer = setInterval(() => {
    // 更新实时数据
    updateChinaMap()

    // 更新顶部指标动画
    topMetrics.forEach((metric) => {
      const change = Math.floor(Math.random() * 50) + 10
      metric.value += change
    })
  }, 5000)

  // 实时动态流更新（每3秒）
  feedTimer = setInterval(() => {
    updateRealTimeFeed()
  }, 3000)
}

const stopDataUpdate = () => {
  if (updateTimer) {
    clearInterval(updateTimer)
    updateTimer = null
  }
  if (feedTimer) {
    clearInterval(feedTimer)
    feedTimer = null
  }
}

// 窗口resize处理
const handleResize = () => {
  chartInstances.value.forEach((chart) => {
    if (chart && !chart.isDisposed()) {
      chart.resize()
    }
  })
}

// 生命周期
onMounted(() => {
  // 确保DOM元素已经渲染
  setTimeout(() => {
    initAllCharts()
    startDataUpdate()
  }, 500)

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  stopDataUpdate()
  window.removeEventListener('resize', handleResize)
  chartInstances.value.forEach((chart) => {
    if (chart && !chart.isDisposed()) {
      chart.dispose()
    }
  })
})
</script>

<style scoped lang="scss">
.dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
  color: #fff;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}

// 顶部指标样式
.top-metrics {
  display: flex;
  gap: 24px;
  margin-bottom: 28px;

  .metric-card {
    flex: 1;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 255, 136, 0.1) 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    min-height: 140px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #00d4ff, transparent);
      animation: shine 3s infinite;
    }

    .metric-icon {
      font-size: 28px;
      color: #00d4ff;
      margin-bottom: 16px;
      display: block;
    }

    .metric-content {
      .metric-value {
        display: flex;
        align-items: baseline;
        gap: 6px;
        margin-bottom: 12px;

        .number {
          font-size: 36px;
          font-weight: bold;
          color: #00ff88;
          font-family: 'Arial', monospace;
          line-height: 1;
        }

        .unit {
          font-size: 18px;
          color: #00d4ff;
          line-height: 1;
        }
      }

      .metric-label {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 12px;
        line-height: 1.4;
        font-weight: 500;
      }

      .metric-trend {
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;

        &.up {
          color: #00ff88;
        }

        &.down {
          color: #ff6b6b;
        }
      }
    }
  }
}

// 主要内容区域
.main-content {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  gap: 24px;
  min-height: 700px;
  align-items: start;
}

// 左右面板样式
.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: fit-content;
}

.left-panel {
  .panel-card {
    background: rgba(0, 40, 102, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 16px;
    padding: 20px;
    backdrop-filter: blur(10px);
    height: auto;
    display: flex;
    flex-direction: column;

    .card-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      font-size: 17px;
      color: #00d4ff;
      border-bottom: 1px solid rgba(0, 212, 255, 0.2);
      padding-bottom: 12px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .real-time-feed {
      max-height: 300px;
      overflow: hidden;
      padding-right: 8px;

      .feed-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px solid rgba(0, 212, 255, 0.1);
        animation: slideInLeft 0.5s ease forwards;
        position: relative;

        &:last-child {
          border-bottom: none;
        }

        .feed-avatar {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          flex-shrink: 0;
          border: 2px solid rgba(0, 212, 255, 0.3);

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .feed-content {
          flex: 1;
          min-width: 0;

          .feed-user {
            font-size: 14px;
            color: #00ff88;
            font-weight: 600;
            margin-bottom: 4px;
            line-height: 1.3;
          }

          .feed-action {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 6px;
            line-height: 1.4;
            word-wrap: break-word;
          }

          .feed-time {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.2;
          }
        }

        .feed-indicator {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          flex-shrink: 0;
          margin-top: 4px;

          &.post {
            background: #00ff88;
            box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
          }
          &.like {
            background: #ff6b6b;
            box-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
          }
          &.comment {
            background: #00d4ff;
            box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
          }
          &.join {
            background: #ffd700;
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
          }
          &.share {
            background: #8b5cf6;
            box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
          }
        }
      }
    }

    .chart-container {
      height: 180px;
      min-height: 180px;
      padding: 12px 8px;
    }
  }
}

.panel-card {
  background: rgba(0, 40, 102, 0.3);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(10px);
  height: auto;

  .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 17px;
    color: #00d4ff;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    padding-bottom: 12px;
    font-weight: 600;
  }

  .chart-container {
    height: 180px;
    min-height: 180px;
    padding: 12px 8px;
  }
}

// 中心地图样式
.center-map {
  background: rgba(0, 40, 102, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  backdrop-filter: blur(10px);
  height: 700px;

  .map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .map-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      color: #00d4ff;
      margin: 0;
      font-weight: 600;
    }

    .map-controls {
      display: flex;
      gap: 12px;
    }
  }

  .map-chart {
    height: calc(100% - 110px);
    margin: 8px 0;
  }

  .map-legend {
    position: absolute;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(0, 20, 51, 0.8);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(0, 212, 255, 0.2);

    .legend-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      line-height: 1.4;

      .legend-color {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        flex-shrink: 0;
      }
    }
  }
}

// 学校排行榜样式
.school-ranking {
  padding-right: 8px;
  max-height: 400px;
  overflow: hidden;

  .ranking-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
    transition: all 0.3s ease;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background: rgba(0, 212, 255, 0.05);
      border-radius: 8px;
      padding-left: 8px;
      padding-right: 8px;
    }

    &.top-three {
      .rank-number {
        background: linear-gradient(135deg, #ffd700, #ff6b35);
        color: #000;
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
      }
    }

    .rank-number {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(0, 212, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .school-info {
      flex: 1;
      min-width: 0;

      .school-name {
        font-size: 14px;
        color: #fff;
        font-weight: 600;
        margin-bottom: 4px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .school-stats {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.2;
      }
    }

    .rank-value {
      font-size: 16px;
      color: #00ff88;
      font-weight: 700;
      flex-shrink: 0;
    }
  }
}

// 背景粒子效果
.particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;

  .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(0, 212, 255, 0.4);
    border-radius: 50%;
    animation: float linear infinite;
  }
}

// 动画定义
@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

// 响应式设计
@media (max-width: 1400px) {
  .main-content {
    grid-template-columns: 280px 1fr 280px;
    gap: 20px;
    min-height: 650px;
  }

  .center-map {
    height: 650px;
  }

  .top-metrics {
    gap: 20px;
  }
}

@media (max-width: 1200px) {
  .dashboard-container {
    padding: 20px;
  }

  .main-content {
    grid-template-columns: 260px 1fr 260px;
    gap: 16px;
    min-height: 600px;
  }

  .center-map {
    height: 600px;
  }

  .top-metrics {
    gap: 16px;
    margin-bottom: 24px;

    .metric-card {
      padding: 20px;
      min-height: 120px;

      .metric-icon {
        font-size: 24px;
        margin-bottom: 12px;
      }

      .metric-content .metric-value .number {
        font-size: 28px;
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    min-height: auto;
  }

  .center-map {
    height: 500px;
  }

  .top-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;

    .metric-card {
      padding: 16px;
      min-height: 100px;

      .metric-icon {
        font-size: 20px;
        margin-bottom: 8px;
      }

      .metric-content {
        .metric-value .number {
          font-size: 24px;
        }

        .metric-label {
          font-size: 13px;
        }
      }
    }
  }

  .panel-card,
  .center-map,
  .analytics-card {
    .card-title {
      font-size: 15px;
      margin-bottom: 16px;
    }
  }
}
</style> 